import {Avatar, Card, Typography} from 'antd';
import React, {useEffect, useState} from 'react';
import {GridContent, PageContainer} from '@ant-design/pro-layout';
import {connect, Link} from 'umi';
import styles from './style.less';
import {genTdkCrumbs} from "@/utils/utils";
import moment from "moment";

const Page = (props) => {
  const {dispatch, match, data} = props;
  const [article, setArticle] = useState(undefined);

  useEffect(async () => {
    if (data) {
      await genTdkCrumbs(data, dispatch, '正文', '');
      setArticle(data);
    }
  }, [match.url]);

  const articleBody = article && (
    <Typography>
      <div className={styles.entry} dangerouslySetInnerHTML={{ __html: article.pubContent}}>
      </div>
      <div className={styles.clearfix}/>
      <div className={styles.pubMeta}>
        累计 {article.views}次浏览
      </div>
    </Typography>
);

return (
  <GridContent>
    <Card className={styles.tabsCard} bordered={true}>
      {article === "" ? <p>请求的内容不存在了……</p> : articleBody}
    </Card>
  </GridContent>
);
};

export default connect(({ user } ) => (
  {
    tdk: user.tdk,
  }
))(Page);